import React from 'react';
import { SmileTwoTone, MehTwoTone, FrownTwoTone, SmileOutlined, MehOutlined, FrownOutlined } from '@ant-design/icons';

class MoodSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            smile: '',
            meh: '',
            frown: '',
            current: ''
        };
        this.moods = ['smile', 'meh', 'frown'];
    }

    componentWillMount() {
        this.initData(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.initData(nextProps);
    }

    initData = (props) => { // 初始化数据
        this.moods.map((mood) => {
            if (mood !== props.value) {
                this.setState({ [mood]: '' });
            } else {
                this.setState({ current: mood, [mood]: 'twoTone' });
            }
        });
    }

    iconConfig = (item) => ({ // icon配置
        onMouseEnter: () => {
            let { current } = this.state;
            current !== item && this.setState({ [item]: 'twoTone' });
        },
        onMouseLeave: () => {
            let { current } = this.state;
            current !== item && this.setState({ [item]: '' });
        },
        onClick: () => {
            this.moods.map((mood) => {
                if (mood !== item) {
                    this.setState({ [mood]: '' });
                } else {
                    let { onSelect } = this.props;
                    this.setState({ current: mood, [mood]: 'twoTone' });
                    onSelect && onSelect(item);
                }
            });
        }
    })

    renderIcon(type) {
        let outlined = { style: { fontSize: 24, marginRight: 10, cursor: 'pointer' } },
            twoTone = { ...outlined, twoToneColor: '#00b1a7' };
        switch (type) {
            case 'smile':
                return <SmileOutlined {...outlined} />;
            case 'smiletwoTone':
                return <SmileTwoTone {...twoTone} />;
            case 'meh':
                return <MehOutlined {...outlined} />;
            case 'mehtwoTone':
                return <MehTwoTone {...twoTone} />;
            case 'frown':
                return <FrownOutlined {...outlined} />;
            case 'frowntwoTone':
                return <FrownTwoTone {...twoTone} />;
            default:
                return '';
        }
    }

    render() {
        let { className } = this.props;
        return (
            <div className={`moodSelect ${className}`}>
                {this.moods.map((item) => (
                    <span key={item} {...this.iconConfig(item)}>{this.renderIcon(`${item}${this.state[item]}`)}</span>
                ))}
            </div>
        )
    }
}
export default MoodSelect;